<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>综合练习</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery.min.js"></script>
		
		<style type="text/css">
			.container{
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h3>HTML、javascript、jquery综合练习</h3>
			<div id="msg" style="display: none;color: white;background-color: #1B6D85;"></div>
			<div class="form-group">
				<label for="username">用户名：</label>
				<input class="form-control" type="text" id="username" name="username" autocomplete="off" placeholder="请输入用户名:" />
			</div>
			<div class="form-group">
				<label for="username">密码：</label>
				<input class="form-control" type="password" id="password" name="password" autocomplete="off" placeholder="请输入密码:" />
			</div>
			<div>
				<button id="btnSubmit" class="btn btn-success">登录</button>
				<button id="btnClear" class="btn btn-danger">取消</button>
			</div>
		</div>
	</body>
	
	<script>
		$("#btnSubmit").click(function(){
			$("#msg").css("display","block").text($("#username").val()+"登录成功");
			$(this).prop("disabled",true);
		});
		$("#btnClear").click(function(){
			$("#username").val("");
			$("#password").val("");
			$("#btnSubmit").prop("disabled",false);
		})
	</script>
</html>
